<!--
@Description:Vconsole 开发调试插件
@Author:zqy
@Date:2023-03-15 09:57:22
@Last Modified by:zqy
@Last Modified time:2023-03-15 09:57:22
-->
<template>
  <div class="debug-btn" :style="position" @click="debugHandle" />
</template>

<script>
import Vconsole from 'vconsole'
export default {
  name: 'Vconsole',
  props: {
    countHits: {
      type: Number,
      default: 5
    }, // 点击多少次显示、隐藏调试插件
    resetTime: {
      type: Number,
      default: 4000
    }, // 多久后重置计数 (默认4秒内点击5次显示、隐藏调试插件)
    position: {
      type: Object,
      default: () => {
        return {
          left: 0,
          bottom: 0
        }
      }
    }
  },
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (process.env.QMP_EVN !== 'production') {
        const __vconsole = document.getElementById('__vconsole')
        if (!__vconsole) {
          new Vconsole()
          this.count = 0
          return
        }
        __vconsole.style.display = 'block'
        this.count = 0
      }
    })
  },
  methods: {
    debugHandle() {
      this.count += 1
      if (this.count >= this.countHits) {
        const __vconsole = document.getElementById('__vconsole')
        if (!__vconsole) {
          new Vconsole()
          this.count = 0
          return
        }
        const vconsoleDisplay = __vconsole?.style?.display
        __vconsole.style.display = vconsoleDisplay === 'none' ? 'block' : 'none'
        this.count = 0
        return
      }
      if (this.count === 1) {
        const timer = setTimeout(() => {
          this.count = 0
          clearTimeout(timer)
        }, this.resetTime)
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .debug-btn {
    position: fixed;
    width: 30px;
    height: 30px;
    background-color: transparent;
    z-index: 99999;
  }
</style>
